<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <div class="col-sm-3">
          <h2 style="margin-top: 5px;">机构列表
            <button @click="refresh" class="btn btn-xs btn-default" type="button">刷新</button>
          </h2>
          <ul class="ztree" id="tree"></ul>
        </div>
        <div class="col-sm-9">
          <div class="col-12 text-left" style="height: 50px;">
            <input class="btn btn-primary" :disabled="parentdisabled" @click="add(0,item)" type="button" value="+ 新增同级机构"/>
            <input class="btn btn-primary" :disabled="parentdisabled" @click="add(1,item)" type="button" value="+ 新增子机构"/>
            <input class="btn btn-primary" @click="edit()" type="button" value="修改"/>
            <input class="btn btn-primary" @click="save()" type="button" value="保存"/>
            <input class="btn btn-primary" :disabled="parentdisabled" @click="del(item)" type="button" value="- 删除"/>
          </div>
          <form id="orgInfoForm" method="post" class="form" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">部门类型：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择部门类型" id="bean-type" name="type" class="form-control" required="" aria-required="true" aria-describedby="bean-type-error" aria-invalid="true">
                    <option value="">--请选择部门类型--</option>
                    <option value="-1" v-if="staff.dto().accountType==-1" :selected="item.type==-1">河长办</option>
                    <option value="0" v-if="staff.dto().accountType>-1" :selected="item.type==0">业务部门</option>
                    <option value="1" v-if="staff.dto().accountType>-1" :selected="item.type==1">联系部门</option>
                  </select>
                  <span id="bean-type-error" class="help-block m-b-none" for="bean-type"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">名称：</label>
                <div class="col-md-12">
                  <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text" placeholder="请输入名称" required="" aria-required="true" aria-describedby="bean-name-error" maxlength="100" aria-invalid="true">
                  <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">上级部门：</label>
                <div class="col-md-12">
                  <select :disabled="parentdisabled" data-placeholder="选择上级部门" required="" id="bean-parentId" name="parentId" class="form-control" aria-describedby="bean-parentId-error" aria-invalid="true">
                    <option value="0">--根部门--</option>
                    <option :value="orgItem.id" :selected="item.parentId == orgItem.id" v-for="orgItem in orgItems">{{ orgItem.name }}</option>
                  </select>
                  <span id="bean-parentId-error" class="help-block m-b-none" for="bean-parentId"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">主要职责：</label>
                <div class="col-md-12">
                  <input id="bean-duty" name="duty" v-model="item.duty" class="form-control" type="text" placeholder="请输入机构职责" required="" aria-describedby="bean-duty-error" aria-invalid="true">
                  <span id="bean-duty-error" class="help-block m-b-none" for="bean-duty"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">单位地址：</label>
                <div class="col-md-12">
                  <input id="bean-address" name="address" v-model="item.address" class="form-control" type="text" placeholder="请输入单位地址" aria-describedby="bean-address-error" maxlength="255" aria-invalid="true">
                  <span id="bean-address-error" class="help-block m-b-none" for="bean-address"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">单位电话：</label>
                <div class="col-md-12">
                  <input id="bean-telphone" name="telphone" v-model="item.telphone" class="form-control" type="text" placeholder="请输入单位电话" aria-describedby="bean-telphone-error" maxlength="25" aria-invalid="true">
                  <span id="bean-telphone-error" class="help-block m-b-none" for="bean-telphone"></span>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">负责人：</label>
                <div class="col-md-12">
                  <input id="bean-leadingCadre" name="leadingCadre" v-model="item.leadingCadre" class="form-control" type="text" placeholder="请输入负责人" aria-describedby="bean-leadingCadre-error" maxlength="85" aria-invalid="true">
                  <span id="bean-leadingCadre-error" class="help-block m-b-none" for="bean-leadingCadre"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">负责人电话：</label>
                <div class="col-md-12">
                  <input id="bean-leadingCadreCallphone" name="leadingCadreCallphone" v-model="item.leadingCadreCallphone" class="form-control" type="text" placeholder="请输入负责人电话" aria-describedby="bean-leadingCadreCallphone-error" maxlength="255" aria-invalid="true">
                  <span id="bean-leadingCadreCallphone-error" class="help-block m-b-none" for="bean-leadingCadreCallphone"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">联系人：</label>
                <div class="col-md-12">
                  <input id="bean-contacts" name="contacts" v-model="item.contacts" class="form-control" type="text" placeholder="请输入联系人" aria-describedby="bean-contacts-error" maxlength="25" aria-invalid="true">
                  <span id="bean-contacts-error" class="help-block m-b-none" for="bean-contacts"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">联系人电话：</label>
                <div class="col-md-12">
                  <input id="bean-contactsCallphone" name="contactsCallphone" v-model="item.contactsCallphone" class="form-control" type="text" placeholder="请输入联系人电话" aria-describedby="bean-contactsCallphone-error" maxlength="25" aria-invalid="true">
                  <span id="bean-contactsCallphone-error" class="help-block m-b-none" for="bean-contactsCallphone"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">机构人员数量：</label>
                <div class="col-md-12">
                  <input id="bean-totalQuantity" name="totalQuantity" v-model="item.totalQuantity" class="form-control" type="text" placeholder="请输入机构人员数量" aria-describedby="bean-totalQuantity-error" aria-invalid="true">
                  <span id="bean-totalQuantity-error" class="help-block m-b-none" for="bean-totalQuantity"></span>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-md-12">
              <vue-area
                  areaId="areaId"
                  areaName="areaName"
                  :areaIdVal="item.areaId||staff.dto().areaId"
                  :areaNameVal="item.areaName||staff.dto().areaName"
                  :areaFixed="item.areaId||staff.dto().areaId"
                  :selectBy="item.areaId||staff.dto().areaId"
                  areaRequired="true,true,false,false,false"
              ></vue-area>
            </div>
            <div class="col-md-12">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">机构说明：</label>
                <div class="col-md-12">
                  <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text" placeholder="请输入机构说明" aria-describedby="bean-memo-error" aria-invalid="true">
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import 'ztree'
import '@/assets/css/zTree.css'
import axios from 'axios'
import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
import vueArea from '@/components/vue-area'
import Swal from 'sweetalert2';

let zTreeObj;

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: '',
      orgItems: [],
      crtOrgId: '',
      parentdisabled: false
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.refresh();
    });
    that.getOrglist();
  },
  watch: {
    // result: function (val) {
    //   this.$nextTick(function () { console.info('变量result渲染完成'); }
    // }
  },
  methods: {
    tree() {
      let that = this;
      axios.post(site.orgInfo.tree, {}, axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          if (result.data.length === 0) {
            $('#tree').html('无数据');
            return;
          }
          zTreeObj = $.fn.zTree.init($('#tree'), {callback: {beforeClick: that.treeNodeClick}}, {isParent: true, name: '根节点', open: true, children: result.data});
          var cookie = $.cookie('zTreeX');
          if (cookie) {
            var zTreeX = JSON.parse(cookie);
            for (var i = 0; i < zTreeX.length; i++) {
              var node = zTreeObj.getNodeByParam('id', zTreeX[i]);
              zTreeObj.expandNode(node, true)
            }
          }
        } else {
          $('#tree').html(result.message);
        }
      });
    },
    add(type, item) {
      let that = this;
      that.parentdisabled = false;
      let parentId = item.parentId;// 点击新增同级机构，则上级部门默认反显其上级部门，不可修改
      if (type === 1) {
        // 点击新增子机构，则上级部门默认选中的机构，不可修改
        parentId = item.id;
        that.crtOrgId = 0;
        that.getOrglist();
      }
      that.item = {};
      that.item.parentId = parentId;
      setTimeout(function () {
        that.parentdisabled = true;
      }, 100)
    },
    info(item) {
      let that = this;
      that.parentdisabled = false;
      if (!(item && apiUtil.notEmpty(item.id))) {
        return;
      }
      that.crtOrgId = item.id;
      that.getOrglist();
      axios.get(site.orgInfo.info + item.id, {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          Swal.fire(result.message);
        }
      });
    },
    getOrglist() {
      let that = this;
      axios.post(site.orgInfo.list + '?crtOrgId=' + that.crtOrgId, {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.orgItems = result.data;
        } else {
          Swal.fire(result.message);
        }
      });
    },
    edit() {

    },
    save() {
      let that = this;
      if ($('#orgInfoForm').valid()) {
        if (that.parentdisabled) {
          $('#bean-parentId').removeAttr('disabled')
        }
        axios.post(site.orgInfo.save, $('#orgInfoForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            that.refresh();
            Swal.fire('保存成功!');
          } else {
            Swal.fire(result.message);
          }
          $('#bean-parentId').attr('disabled', that.parentdisabled);
        });
      }
    },
    del(item) {
      let that = this;
      if (confirm('确认删除吗?')) {
        axios.post(site.orgInfo.del + item.id, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.refresh();
            Swal.fire('删除成功');
          } else {
            Swal.fire(result.message);
          }
        });
      }
    },
    treeNodeExpand(treeNode) {
      // console.info('treeNodeExpand='+treeNode)
      var cookie = $.cookie('zTreeX');
      var zTreeX = null;
      if (cookie) {
        zTreeX = JSON.parse(cookie);
      }
      if (!zTreeX) {
        zTreeX = [];
      }
      if ($.inArray(treeNode.id, zTreeX) < 0) {
        zTreeX.push(treeNode.id);
      }
      $.cookie('zTreeX', JSON.stringify(zTreeX))
    },
    treeNodeCollapse(treeNode) {
      // console.info('treeNodeCollapse='+treeNode)
      const cookie = $.cookie('zTreeX');
      let zTreeX = null;
      if (cookie) {
        zTreeX = JSON.parse(cookie);
      }
      if (!zTreeX) {
        zTreeX = [];
      }
      const index = $.inArray(treeNode.id, zTreeX);
      zTreeX.splice(index, 1);
      $.cookie('zTreeX', JSON.stringify(zTreeX))
    },
    treeNodeClick(treeId, treeNode) {
      // console.info(treeNode)
      this.info(treeNode);
    },
    refresh() {
      this.tree();
    }
  }
}
</script>
